<template>
  <view class="my-published-activities-page">
    <!-- 头部区域：返回按钮 + 页面标题 -->
    <my-navbar title="我发布的活动列表" leftIcon="arrow-left" bgColor="#4facfe" :custom="false" :autoBack="true"
        		titleStyle="color:#ffffff" leftIconColor="#ffffff" leftIconSize="40"></my-navbar>

	<!-- 发布新活动按钮 -->
    <button class="publish-btn" @click="goToPublishActivity">发布新活动</button>
	
    <!-- 活动列表：循环渲染每个活动项 -->
    <view class="activity-list">
        <!-- 循环渲染每个活动项 -->
        <view 
          class="activity-item" 
          v-for="(activity, index) in activityList" 
          :key="index"
          @click="handleActivityClick(activity)"
        >
          <!-- 活动标题和操作区 -->
          <view class="item-header">
            <text class="activity-name">{{ activity.eventtitle }}</text>
            <view class="icons-group">
              <!-- 闪电图标（按需显示） -->
              <u-icon 
                name="star" 
                size="28" 
                color="#ffcc00"
                class="lightning-icon"
                v-if="activity.status === '0'"
              ></u-icon>
              <!-- 编辑图标 -->
              <u-icon 
                name="star" 
                size="28" 
                color="#999"
                class="edit-icon"
              ></u-icon>
            </view>
          </view>
    
          <!-- 活动详情信息 -->
          <view class="item-info">
            <!-- 地点信息 -->
            <view class="info-row">
              <u-icon name="star" size="24" color="#666" class="info-icon"></u-icon>
              <text class="activity-location">活动地点：{{ activity.detailedaddress }}</text>
            </view>
    
            <!-- 时间信息 -->
            <view class="info-row">
              <u-icon name="clock" size="24" color="#666" class="info-icon"></u-icon>
              <text class="activity-time">活动时间：</text>
              <text class="time-text" :class="{ 'orange-text': activity.status === '发布中' }">
                {{ activity.starttime }}~{{ activity.endtime }}
              </text>
            </view>
          </view>
        </view>
      </view>

  </view>
</template>

<script>
	import {
		getpublishevent,
	} from '@/config/api.js'
export default {
  data() {
    return {
		userInfo:{},
		token:'',
      activityList: [
        
      ] // 活动列表数据，实际可从后端接口获取
    };
  },
  methods: {
    goBack() {
      // 返回上一页
      uni.navigateBack();
    },
    handleActivityClick(activity) {
      // 活动项点击逻辑，可前往活动详情或编辑页
      uni.navigateTo({
        url: `other_pages/publishActivity/publishActivity?`
      });
    },
    goToPublishActivity() {
      // 前往发布新活动页面
      uni.navigateTo({
        url: "/other_pages/publishActivity/publishActivity"
      });
    },
	async getmypublish() {
		const {
			data
		} = await getpublishevent({
			// phone:this.userInfo.phone,
			// nickName:this.userInfo.nickName,
			// eventcity:this.userInfo.city,
			openid:this.token
		}, {
			header: {
				'Content-Type': 'application/json'
			},
		})
		console.log(data)
		this.activityList=data.rows
		setTimeout(() => {
			uni.hideLoading()
		}, 2000)
	},

  },
  onLoad(options) { // options 包含路由传递的所有参数
        var isLogin = uni.getStorageSync('isLogin')
        if (isLogin == true) {
        	this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
  		this.token = uni.getStorageSync('token');
        	console.log(this.userInfo)
  		this.getmypublish()
        }
    	},
    onReady() {},
    onShow() {}
};
</script>

<style scoped>
.my-published-activities-page {
  background-color: #fff;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  border-bottom: 1px solid #eee;
}

.back-btn {
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 8rpx;
  padding: 8rpx 16rpx;
  font-size: 28rpx;
  margin-right: 24rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

/* 列表容器 */
.activity-list {
  padding: 15rpx;
  display: flex;
  flex-direction: column;
  gap: 15rpx; /* 列表项之间的间距 */
}

/* 活动项卡片 */
.activity-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); /* 轻微阴影提升层次 */
}

/* 标题和操作区 */
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15rpx;
}

/* 活动标题 */
.activity-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  flex: 1;
  margin-right: 15rpx; /* 与图标保持距离 */
  /* 标题过长显示省略号 */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 图标组 */
.icons-group {
  display: flex;
  align-items: center;
  gap: 15rpx; /* 图标之间的间距 */
}

/* 详情信息区 */
.item-info {
  display: flex;
  flex-direction: column;
  gap: 10rpx; /* 两行信息的间距 */
}

/* 信息行 */
.info-row {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  line-height: 1.5;
}

/* 信息图标 */
.info-icon {
  margin-right: 8rpx;
  flex-shrink: 0; /* 防止图标被压缩 */
}

/* 地点文字 */
.activity-location {
  color: #666;
}

/* 时间标签文字 */
.activity-time {
  color: #666;
  margin-right: 5rpx;
}

/* 时间内容文字 */
.time-text {
  color: #444;
}

/* 发布中状态的高亮色 */
.orange-text {
  color: #ff7d00 !important;
  font-weight: 500;
}

/* 图标hover效果 */
.edit-icon, .lightning-icon {
  transition: transform 0.2s;
}
.edit-icon:active, .lightning-icon:active {
  transform: scale(0.9);
}
.edit-icon {
  position: absolute;
  top: 50%;
  right: 60rpx;
  transform: translateY(-50%);
}

.lightning-icon {
  position: absolute;
  top: 20rpx;
  right: 24rpx;
}

.publish-btn {
  background-color: #007AFF;
  color: #fff;
  font-size: 30rpx;
  padding: 20rpx;
  width: 50%;
  margin: 30rpx auto;
  border-radius: 8rpx;
}
</style>